<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="customHeader">
        <div class="bottom_box_total">
          <div>退货明细表</div>
          <span class="pr" style="margin-left:6px"> 退货单号：{{order_id}}</span>
          <span class="pr"> 退货方：{{store_name}}</span>
          <span class="pr"> 收货方：{{receive_name}}</span>
          <span class="pr"> 入库时间：{{nowtime}}</span>
        </div>
      </div>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <b>{{scope.$index + 1  + (currentPage - 1) * 20}}</b>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label='成本价（元）'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="实退货数量（个）" prop="order_num"></el-table-column>
        <el-table-column align="center" label="实退货金额（元）" prop="all_money">
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.all_money|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <div class="pull-right mt10" style="font-size:14px;color:#606266">
        <span style="margin-right:20px">实退货数量合计：{{returnNum}}</span>
        <span>实退货金额合计：{{returnMoney|keepTwoNum}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getList, getPage } from '@/api/report/return_detail_form';
export default {
  data() {
    return {
      store_name: '',
      order_id: '',
      receive_name: '',
      nowtime: '',
      list: null,
      listLoading: false,
      currentPage: 1,
      totalDataNumber: 0,
      formInline: {
        id: ''
      },
      returnNum: 0,
      returnMoney: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => { 
      if(vm.$route.params.routerflag){
        vm.formInline.id = vm.$route.params.id;
        vm.store_name = vm.$route.params.store_name;
        vm.order_id = vm.$route.params.order_id;
        vm.receive_name = vm.$route.params.receive_name;
        vm.nowtime = vm.$route.params.time;
        vm.fetchData(); 
      }
    });
  }, 
  methods: {
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          // console.log(11, response);
          this.totalDataNumber = response.data.page * 20;
          this.returnNum = response.data.num ? response.data.num : 0;
          this.returnMoney = response.data.money;
          getList(this.formInline, this.currentPage).then(response => {
            this.list = response.data;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentPage = val;
      getList(this.formInline, this.currentPage).then(response => {
            this.list = response.data;
            this.listLoading = false;
          })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped>
.bottom_box_total {
  font-size: 14px;
  color: #606266;
}
.pr {
  padding-right: 15px;
}
</style>